import { defineComponent, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import {
  ElCard,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElButton,
  ElIcon,
  ElSpace,
  ElLink,
  ElMessageBox,
  ElMessage
} from 'element-plus'
import { Delete, Refresh } from '@element-plus/icons-vue'

export default defineComponent(function Advice() {
  const store = useStore()
  const formValues = reactive({
    // keyWord: '',
    current: 1,
    size: 15
  })
  const state = reactive({
    type: 'read',
    record: {},
    list: [],
    total: 0,
    selecteds: []
  })
  //  列表数据
  const index = async () => {
    try {
      const { data } = await store.dispatch('message/MessageListGet', formValues)
      state.list = data.records
      state.total = data.total
    } catch (error) {}
  }
  //  每页数量
  const onSizeChange = (value: any) => {
    formValues.size = value
    index()
  }
  //  分页
  const onCurrentChange = (value: any) => {
    formValues.current = value
    index()
  }
  //  勾选数据
  const handleSelectionChange = (value: any) => {
    state.selecteds = value
  }
  // 打开删除消息确认框
  const handleOpenDeleteConfirm = (record?: any) => {
    if (!record && !state.selecteds.length) {
      ElMessage({ type: 'warning', message: '请选择至少一条数据' })
      return
    }
    const params = record?.id || state.selecteds.map?.((item: any) => item.id)?.join(',')
    ElMessageBox.confirm('确定将选择数据删除?', '确认提示', {
      buttonSize: 'small',
      type: 'warning',
      closeOnClickModal: false, // 点遮罩层不关弹窗
      draggable: true // 可拖拽
    })
      .then(async () => {
        await store.dispatch('message/MessageRemovePost', { ids: params }).then((res) => {
          if (res?.code === 200) {
            index()
            ElMessage({ type: 'success', message: '操作成功' })
          }
        })
      })
      .catch(() => {})
  }
  //  一键已读
  const onRead = async () => {
    if (!state.selecteds.length) {
      ElMessage({ type: 'warning', message: '请选择至少一条数据' })
      return
    }
    const params = state.selecteds.map?.((item: any) => item.id)?.join(',')
    const { code } = await store.dispatch('send/SendReadAllPost', { ids: params })
    if (code === 200) {
      index()
      ElMessage({ type: 'success', message: '操作成功' })
    }
  }

  onMounted(() => {
    index()
  })

  return () => (
    <ElCard>
      <div>
        <div>
          <ElButton type="primary" plain onClick={onRead}>
            <ElIcon>
              <Refresh />
            </ElIcon>
            &nbsp; 一键已读
          </ElButton>
          <ElButton type="danger" plain onClick={() => handleOpenDeleteConfirm()}>
            <ElIcon>
              <Delete />
            </ElIcon>
            &nbsp; 删除
          </ElButton>
        </div>
        <div style="height: 16px;"></div>
        <ElTable data={state.list} onSelection-change={handleSelectionChange}>
          <ElTableColumn type="selection" width="55" />
          <ElTableColumn
            prop="msgType"
            label="消息类型"
            v-slots={{
              default: (scope: any) => (
                <span>
                  {scope.row.msgType === 1 && '系统消息'}
                  {scope.row.msgType === 2 && '业务消息'}
                  {scope.row.msgType === 3 && '通知公告'}
                </span>
              )
            }}
          />
          <ElTableColumn prop="msgTitle" label="标题" />
          <ElTableColumn prop="msgContent" label="内容" />
          <ElTableColumn prop="createUserName" label="发送人" />
          <ElTableColumn
            prop="readFlag"
            label="是否已读"
            v-slots={{
              default: (scope: any) => (
                <span>
                  {scope.row.readFlag === 0 && '否'}
                  {scope.row.readFlag === 1 && '是'}
                </span>
              )
            }}
          />
          <ElTableColumn prop="createTime" width={180} label="日期" />
          <ElTableColumn
            label="操作"
            v-slots={{
              default: (scope: any) => (
                <ElSpace>
                  {/* <ElLink type="primary" onClick={() => handleOpenDeleteConfirm(scope.row)}>
                    <ElIcon>
                      <Delete />
                    </ElIcon>
                    &nbsp; 详情
                  </ElLink> */}

                  <ElLink type="primary" onClick={() => handleOpenDeleteConfirm(scope.row)}>
                    <ElIcon>
                      <Delete />
                    </ElIcon>
                    &nbsp; 删除
                  </ElLink>
                </ElSpace>
              )
            }}
          />
        </ElTable>
        <div style="height: 10px;"></div>
        <ElPagination
          v-model:currentPage={formValues.current}
          v-model:pageSize={formValues.size}
          layout="total, sizes, prev, pager, next, jumper"
          background={true}
          small={true}
          total={state.total}
          onSize-change={onSizeChange}
          onCurrent-change={onCurrentChange}
        />
      </div>
    </ElCard>
  )
})
